<template>
    <div class="view">
        <nav-bar class="nav-fix" :title="user.nickname" :fixed="false" color="#fff" size="20px">
<!--            <div slot="left">-->
<!--                <i class="iconfont icon-xiaoxi" style="padding-left: 8px; color:#9d9d9d; font-size: 20px;" @click="toPage('messageList')"></i>-->
<!--                <badge type="danger" :text="messageNotReadCount+''" v-if="messageNotReadCount>0"></badge>-->
<!--            </div>-->
            <div slot="right">
<!--                <a :href="'tel:'+tel">-->
<!--                    <i class="iconfont icon-kefu1" style="padding-left: 8px; color: #9d9d9d; font-size: 20px;"></i>-->
<!--                </a>-->
                <i class="iconfont icon-shezhi" style="padding-left: 8px; color:#fff; font-size: 20px;" @click="toPage('setting')"></i>
            </div>
        </nav-bar>
        <cube-scroll :data="giftList" class="scroll" ref="scroll" :scroll-events="['scroll']">
            <div class="mine-info">
                <div class="head-img-box" @click="toPage('mineAlbum')">
                    <head-img class="self-img"
                              :styleObject="{width:'18vw',height:'18vw'}"
                              showObject="self" :friend="self"
                              :self="self"
                              noneImgTip=""></head-img>
                </div>
                <div class="mine-base flex" v-if="user.token!==''" @click.stop="toPage('mineData')">
                    <div class="mine-info-integrity flex">
                        <div class="level-or-integrity flex">
                            <span class="mine-vip-level ellipsis">{{user.phone}}</span>
                        </div>
                        <div class="iconfont icon-icon-test">&nbsp;{{user.rankName}}</div>
                        <div class="mine-info-score">余额<em>￥{{user.money}}</em></div>
                    </div>
                    <div class="self-data">资料 <span class="iconfont icon-youbian"></span></div>
                </div>
                <div class="dislogin" v-else @click.stop="toPage('loginRegister')">
                    <div class="">登录/注册</div>
                </div>
            </div>
            <div class="self-intro order">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>我的订单</div>
                    <div @click="toPage('orderList',{status:'999'})" class="more-text" >查看全部<i style="padding-left: 5px;" class="cubeic-arrow"></i></div>
                </div>
                <div class="content flex">
                    <div class="all" @click="toPage('orderList',{status:'999'})">
                        <p class="icon-svg">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-dingdanlan"></use>
                            </svg>
                        </p>
                        <p>全部</p>
                    </div>
                    <div class="unpay" @click="toPage('orderList',{status:'0'})">
                        <p class="icon-svg">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-daifukuan"></use>
                            </svg>
                        </p>
                        <p>待付款</p>
                    </div>
                    <div class="pay" @click="toPage('orderList',{status:'1'})">
                        <p class="icon-svg">
                            <svg class="svg-icon icon-daifahuo" aria-hidden="true">
                                <use xlink:href="#icon-daifahuo"></use>
                            </svg>
                        </p>
                        <p>待发货</p>
                    </div>
                    <div class="send" @click="toPage('orderList',{status:'2'})">
                        <p class="icon-svg">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-daishouhuo"></use>
                            </svg>
                        </p>
                        <p>待收货</p>
                    </div>
                    <div class="comment" @click="toPage('orderList',{status:'3'})">
                        <p class="icon-svg">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-daipingjia"></use>
                            </svg>
                        </p>
                        <p>待评价</p>
                    </div>
                </div>
            </div>
            <div class="self-intro asset">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>我的资产</div>
                </div>
                <div class="content flex">
                   <div class="score flex" @click="toPage('mineIncome')">
                       <div class="left">
                           <svg class="svg-icon" aria-hidden="true">
                               <use xlink:href="#icon-jifen"></use>
                           </svg>
                       </div>
                       <div class="right">
                           <div class="title">我的积分</div>
                           <div class="num">{{user.payPoints}}</div>
                       </div>
                   </div>
                    <div class="team flex" @click="toPage('mineFans')">
                        <div class="left">
                            <span class="iconfont icon-tuandui1"></span>
                        </div>
                        <div class="right">
                            <div class="title">我的团队</div>
                            <div class="num">{{user.teamCount}}</div>
                        </div>
                    </div>
                    <div class="score flex" @click="toPage('mineMoneyTransferAccounts')">
                        <div class="left">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuanzhang"></use>
                            </svg>
                        </div>
                        <div class="right">
                            <div class="title">积分转账</div>
                        </div>
                    </div>
<!--                    v-if="user.userRank>1"-->
                    <div class="score flex" :class="!user.userRank>1?'':'disable'"  @click="user.userRank>1?toPage('mineActivity'):noInQueue()">
                        <div class="left">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-liwu"></use>
                            </svg>
                        </div>
                        <div class="right">
                            <div class="title">专属活动</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="self-intro">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>常用工具</div>
                </div>
                <div class="content flex">
                    <div class="mine-service flex">
                        <div class="mine-chunk" @click="toPage('addressList')">
                            <p class="iconfont icon-dizhichaxun"></p>
                            <p class="title">地址管理 </p>
                        </div>
                        <div class="mine-chunk" @click="toPage('mineShare')">
                            <p class="iconfont icon-tianjiayaoqingma"></p>
                            <p class="title">邀请好友</p>
                        </div>
                        <div class="mine-chunk" @click="toPage('settingPassword')">
                            <p class="iconfont icon-mimaxiugai"></p>
                            <p class="title">修改密码</p>
                        </div>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import Badge from "@/components/aui/Badge.vue";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import NavBar from "@/components/aui/NavBar.vue";
    import HeadImg from "@/components/HeadImg.vue";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";
    import WeixinServlet from "@/service/WeixinServlet";

    @Component({
        components: {
            NavBar, HeadImg,Badge
        }
    })
    export default class Mine extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private allGiftCount: number = 0;
        private tel: string = "";
        private userRank: string[] = [];
        private messageNotReadCount: number=0;

        @State("UserStore")
        public user!: InterfaceUser;

        @State("DeviceStore")
        private device: any;

        private giftList: any[] = [];

        private get self(): any {
            return {
                headImg: this.user.avatarId > 0 ? this.user.avatar.filePath : "",
            };
        }

        private created() {
            //this.getTel();
        }

        private activated() {
            (<any> this).$refs.scroll.refresh();
            //(<any> this).$refs.slide.refresh();
            const weixin = new WeixinServlet(["updateAppMessageShareData", "chooseWXPay"]);
            //this.getMessageNotReadCount();
        }

        private updated() {
            // (<any> this).$refs.slide.refresh();
        }

        private noInQueue(){
            (<any> this).$createToast({
                time: 2500,
                type: "warn",
                txt: `抢先购买专属商品后，方可体验专属活动`,
            }).show();
        }

        private getTel(): any {
            Http.get(this.api.getAppInfo, {type: "tel"},{}).then((res) => {
                if (res.code === 1) {
                    this.tel = res.data.content;
                }
            });
        }

        private getMyGiftList(): any {
            Http.get(this.api.getMyGiftList, {page: 1, size: 7}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.allGiftCount = res.data.total;
                    this.giftList.splice(0, this.giftList.length);
                    this.giftList.push(...res.data.data);
                }
            });
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private getMessageNotReadCount():void{
            try {
                Http.get(this.api.getMessageNotReadCount, {}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        this.messageNotReadCount=res.data.count;
                    }else {
                        (<any> this).$createToast({
                            time: 2500,
                            type: "error",
                            mask: true,
                            txt: `${res.msg}`,
                            onTimeout: () => {
                                this.navigateBack();
                            }
                        }).show();
                    }
                });
            }catch (e) {
                console.log(e);
            }
        }

        private mounted(): void {
            this.$nextTick(() => {
                //this.getMyGiftList();
                //this.showVipExpire();
            });
        }

        private becomeMember(): void {
            if (this.user.userRank === 1 || this.user.userRank === 2) {
                this.navigateTo({
                    name: "mineMemberRank"
                });
            }
        }

        private showVipExpire(): void {
            const nowShowTime = Date.parse(String(new Date())) / 1000;
            if (this.user.validityTime - nowShowTime < 7 * 24 * 60 * 60 && (this.user.userRank === 2 || this.user.userRank === 3)) {
                const lastShowTime = Number(localStorage.getItem("vipExpireTime") || "0");
                if ((nowShowTime - lastShowTime) > 24 * 60 * 60) {
                    (<any> this).$createDialog({
                        type: "confirm",
                        title: "会员等级即将到期",
                        content: "到期后将不能享受现有的会员服务哦",
                        confirmBtn: {
                            text: "立即续费",
                            active: true,
                            disabled: false,
                        },
                        cancelBtn: {
                            text: "放弃特权",
                            active: false,
                            disabled: false,
                        },
                        onConfirm: () => {
                            this.navigateTo({
                                name: "mineMemberRank"
                            });
                        }
                    }).show();
                    localStorage.setItem("vipExpireTime", String(nowShowTime));
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height calc(100vh - 47px);
        background $theme-page-common-background-color;

        .nav-fix
            width 100vw;
            position fixed;
            left 0;
            z-index 100;
            background-color $theme-common-color !important;

            >>> .badge
                position relative;
                font-size 10px;

        .scroll
            height calc(100vh - var(--safe-area-inset-bottom) - 47px);

        .mine-info
            height 95px;
            background $theme-common-color;
            padding 10px;
            display flex;
            align-items center;
            position relative;
            margin-top calc(39px + var(--safe-area-inset-top));

            .head-img-box
                position relative;
                text-align center;
                border-radius 50%;
                overflow hidden;

                .state-tip
                    width 100%;
                    height 20px;
                    line-height 20px;
                    color #fff;
                    font-size 10px;
                    background-color rgba(0, 0, 0, .5);
                    position absolute;
                    bottom 0;
                    left 0;

            .mine-base
                width calc(100vw - 75px);
                height 76px;
                padding 8px 0px 10px 8px;
                justify-content space-between;
                align-items center;
                //flex-direction column;
                position relative;
                flex-wrap nowrap;

                .mine-info-integrity
                    width calc(100vw - 75px - 75px);
                    flex-wrap wrap;
                    height 60px;
                    align-content space-between;
                    color #fff;

                    > div
                        width 100%;

                    .level-or-integrity
                        justify-content: space-between;

                        .mine-vip-level
                           // padding 0 10px;
                            //background $theme-weight-color;
                            color #fff;
                            font-size 12px;
                            display block;
                            height 18px;
                            line-height 18px;
                            border-radius 10px;


                    .icon-icon-test
                        font-size 12px;

                    .mine-info-score
                        color #fff;
                        font-size 13px;

                        em
                            color $theme-advancing-color;
                            font-weight 600;
                            font-size 14px;
                            font-style normal;
                            padding 0 1px;

                .self-data
                    color #fff;

            .dislogin
                width calc(100vw - 75px);
                height 76px;
                line-height 76px;
                padding 8px 0px 10px 12px;
                color #ffffff;


        .order
            margin-top 0px !important;
            .content
                padding 15px 0;
                justify-content: space-around;
                >div
                    width 20%;
                    text-align center;
                    .icon-svg
                        height 35px;
                        svg
                            font-size 30px;
                        svg.icon-daifahuo
                            font-size 27px;


        .asset
            .content
                justify-content: space-between;
                flex-wrap wrap;
                >div
                    width 50vw;
                    padding 15px;
                    border-right 1px solid $theme-line-color;
                    border-bottom 1px solid $theme-line-color;
                    align-items center;

                    &:nth-child(2),&:nth-child(4)
                        border-right none;

                    &:nth-child(3),&:nth-child(4)
                        border-bottom none;

                    .left
                        padding-right 10px;
                        font-size 24px;

                div.team
                    .left
                        color $theme-weixin-default;
                        span
                            font-size 24px;

        .mine-service
            //margin-top 5px;
            flex-wrap wrap;
            background #fff;
            text-align center;

            .mine-chunk
                display flex;
                flex-wrap wrap;
                align-content center;
                width 25vw;
                height 27vw;
                border-right 1px solid $theme-line-color;
                border-bottom 1px solid $theme-line-color;

                > p
                    width 25vw;

                p.iconfont, p.icon-svg
                    font-size 30px;
                    line-height 50px;

                p.icon-svg
                    font-size 34px;

                p.icon-daijinjuanguanli
                    color #FF4000;

                p.icon-dingdan
                    color #3DA1FF;

                p.icon-dizhichaxun
                    color #00D2DC;

                p.icon-tianjiayaoqingma
                    color $theme-weight-color;

                p.icon-mimaxiugai
                    color $theme-weixin-default;
                    font-size 32px;

                p.icon-tubiao_UMEqianxian
                    color red;

                p.icon-fensi
                    color #4FBB88;

            .mine-chunk:nth-child(4n)
                border-right-width 0 !important;

        .self-intro
            margin-top 16px;
            background-color #fff;

            > .title
                font-size 14px;
                align-items center;
                height 40px;
                position relative;

                &::after
                    display block;
                    content '';
                    width calc(100vw - 30px);
                    height 1px;
                    background-color $theme-line-color;
                    position absolute;
                    bottom 0px;
                    left 15px;

                .deco-line
                    width 20px;
                    height 20px;
                    border-left 2px solid $theme-common-color;

                .more-text
                    font-size 12px;
                    color #aaa;
                    position absolute;
                    right 10px;
                    height 40px;
                    line-height 40px;

                .title-text
                    width calc(100vw - 20px - 20px);

                    span
                        color $theme-common-color;

            .content
                line-height 1.4em;

        .authentication
            margin-top 20px;

            .content
                padding 15px;
                justify-content: center;

                .real
                    text-align center;

                    .icon-box
                        width 60px;
                        height 60px;
                        border-radius 50%;
                        background-color $theme-page-common-background-color;
                        line-height 60px;
                        margin-bottom 10px;

                        .icon-renzheng
                            font-size 25px;
                            color #fff;

                    .is-real
                        background #DE1B9A !important;

        .gift-wrap
            width 100vw;

            .horizontal-scroll-gift-list
                >>> .cube-scroll-content
                    display inline-block

                .horizontal-scroll-gift-list-wrap
                    white-space nowrap


            .gift-item
                display inline-block
                width calc(30vw - 10px);
                position relative;
                justify-content space-between;
                align-items center;
                margin 5px;
                padding 7px;
                box-sizing border-box
                flex-direction column;
                border-radius 5px;


                img.gift-picture
                    width calc(30vw - 30px);
                    height calc(30vw - 30px);
                    display block;
                    margin auto

                .gift-name
                    color #878787;
                    margin-top 2px
                    font-size 14px;
                    text-align center;

                .gift-price
                    color #bbb;
                    font-size 13px;
                    line-height 20px;
                    text-align center;

                    &::before
                        padding-right 2px;
                        font-size 11px;


        .self-partner
            .content
                padding 15px;
                justify-content center;
                text-align center;

                .top
                    width 60px;
                    height 60px;
                    line-height 60px;
                    margin 0 auto;
                    border-radius 50%;
                    background-color $theme-page-common-background-color;

                    svg
                        font-size 40px;
                        vertical-align middle;

                .bottom
                    width calc(50vw - 15px);
                    margin-top 5px;

    .privilege-item
        width 100vw;
        overflow hidden

        .privilege-item-content
            margin 10px 20px
            height 100px;
            border-radius 10px;
            box-shadow: 0 .5px 10px rgba(0, 0, 0, 0.21)
            overflow hidden
            position relative;

            .privilege-item-img
                background-position center;
                background-size cover;
                filter blur(1px);
                opacity .2;
                position absolute;
                width 100%;
                height 100%;
                top 0;
                left 0;

        .privilege-item-text-in-app
            font-family lovely !important;

        .privilege-item-text
            width 100%;
            height 100px;
            display flex;
            justify-content space-between;
            flex-direction column;
            color $theme-common-color
            padding 10px 20px;


            .privilege-item-title
                font-size 19px;
                font-weight 700

                span
                    font-size 13px;

            .privilege-item-desc
                text-align right;
                font-size 15px;

                .privilege-item-desc-btn
                    padding 5px 15px;
                    display inline;
                    border-radius 3px;
                    border 1px solid $theme-common-color;
                    background rgba(255, 255, 255, .2);

                span
                    font-size 20px;
                    padding 0 5px;

    .disable
        filter grayscale(100%);
        filter gray;
</style>
